<template>
  <div class="shenTong_box">

    <div class="items">
      <div class="label">{{$t('m.dayTime')}}</div>
      <DatePicker type="daterange" :value="TimeDefault" format="yyyy-MM-dd" :options="disDate" @on-change="timeChange" v-bind:placeholder="$t('m.spsj')" class="ivu-input-w200"></DatePicker>
    </div>

    <div class="items">
      <div class="label">{{$t('m.shěnpījiēduàn')}}</div>
      <Select v-model="auditType" class="ivu-input-w200" :placeholder="this.$t('m.loanCount')">
        <Option :value="'first'">{{$t('m.chūshěn')}}</Option>
        <Option :value="'final'">{{$t('m.zhōngshěn')}}</Option>
      </Select>
    </div>

    <div class="items">
      <div class="label">{{$t('m.shěnpīrényuán')}}</div>
      <Select v-model="checkerFirst" class="ivu-input-w200" :placeholder="this.$t('m.qǐngxuǎnzéjuésè')">
        <Option :value="''">{{$t('m.entire')}}</Option>
        <Option v-for="item in PersonnelList" :value="item.account">{{item.account}}</Option>
      </Select>
    </div>
    <br>
    <div style="margin-top:20px;">
      <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
      <Button class="parameter_button" type="primary" @click="queryShenTong">{{$t('m.cháxún')}}</Button>

    </div>
    <Tabs value="name1" class="shenTong_tab">
      <TabPane :label="this.$t('m.shěnpījìndù')" name="name1">

        <Row class="shenTong_tab_item">
          <Col class="item_Col" span="8">
          <div class="item_Col_box">
            <p>{{$t('m.yǐshěnpīshù')}} ({{$t('m.gè')}})</p> <span>{{shenTongDataTotal.auditedCount}}</span>
          </div>
          </Col>
          <Col class="item_Col" span="8">
          <div class="item_Col_box">
            <p>{{$t('m.dàishěnpīshù')}} ({{$t('m.gè')}})</p> <span>{{shenTongDataTotal.auditingCount}}</span>
          </div>
          </Col>
          <Col class="item_Col" span="8">
          <div class="item_Col_box">
            <p>{{$t('m.fēndānshù')}} ({{$t('m.gè')}})</p> <span>{{shenTongDataTotal.assignedCount}}</span>
          </div>
          </Col>
        </Row>
        <Row class="shenTong_tab_item">
          <Col class="item_Col " span="8">

          <div class="item_Col_box ApprovalBy">
            <Row>
              <Col span="12">
              <p class="item_Col_box_color_White">{{$t('m.shěnpītōngguòshù')}}</p> <span class="item_Col_box_color_White">{{shenTongDataTotal.passCount}}</span>
              </Col>
              <Col span="12">
              <p class="item_Col_box_color_White">{{$t('m.shěnpītōngguòlǜ')}}</p>

              <i-circle :size="100" :percent="shenTongDataTotal.passRate" :stroke-width="13" :trail-width="13" stroke-color="#FFF" trail-color="#2D8CF0">
                <span class="item_Col_box_circle_title">{{shenTongDataTotal.passRate}}%</span>
              </i-circle>
              </Col>
            </Row>

          </div>
          </Col>
          <Col class="item_Col " span="8">

          <div class="item_Col_box ApprovalRefuse">
            <Row>
              <Col span="12">
              <p class="item_Col_box_color_White">{{$t('m.shěnpījùjuéshù')}}</p> <span class="item_Col_box_color_White">{{shenTongDataTotal.rejectCount}}</span>
              </Col>
              <Col span="12">
              <p class="item_Col_box_color_White">{{$t('m.shěnpījùjuélǜ')}}</p>

              <i-circle :size="100" :percent="shenTongDataTotal.rejectRate" :stroke-width="13" :trail-width="13" stroke-color="#FFF" trail-color="#E06E6E">
                <span class="item_Col_box_circle_title">{{shenTongDataTotal.rejectRate}}%</span>
              </i-circle>
              </Col>
            </Row>
          </div>
          </Col>
          <Col class="item_Col " span="8">
          <div>
            <Row class="item_Col_box ApprovalPending">
              <Col span="12">
              <p class="item_Col_box_color_White">{{$t('m.shěnpīguàqǐshù')}}</p> <span class="item_Col_box_color_White">{{shenTongDataTotal.hangingCount}}</span>
              </Col>
              <Col span="12">
              <p class="item_Col_box_color_White">{{$t('m.shěnpīguàqǐlǜ')}}</p>

              <i-circle :size="100" :percent="shenTongDataTotal.hangingRate" :stroke-width="13" :trail-width="13" stroke-color="#FFF" trail-color="#F2B87B">
                <span class="item_Col_box_circle_title">{{shenTongDataTotal.hangingRate}}%</span>
              </i-circle>
              </Col>
            </Row>

          </div>
          </Col>
        </Row>

        <Table border :columns="scheduleTable" :data=" shenTongProgressPaging" class="schedule_box" :loading="shenTongProgressLoading"></Table>
        <div style="float:right;margin-right: -12px;margin-top: 20px;">
          <Page v-if="shenTongDataList.length >10" :total="shenTongDataList.length" :current.sync="ProgressPage" :ProgressPage-size-opts="[10, 20, 40, 80, 100, 200, 400, 600, 800, 1000]" show-total show-elevator show-sizer @on-change="ProgressChange" @on-page-size-change="ProgressSizeChange"></Page>
        </div>
      </TabPane>
      <TabPane :label="this.$t('m.shěnpīzhìliàng')" name="name2">

        <Row class="shenTong_tab_item">
          <Col class="item_Col" span="8">
          <div class="item_Col_box">
            <p>{{$t('m.dàishěnpīshù')}} ({{$t('m.gè')}})</p> <span>{{shenTongDataTotal.auditingCount}}</span>
          </div>
          </Col>
          <Col class="item_Col" span="8">
          <div class="item_Col_box">
            <p>{{$t('m.fēndānshù')}} ({{$t('m.gè')}})</p> <span>{{shenTongDataTotal.assignedCount}}</span>
          </div>
          </Col>
          <Col class="item_Col" span="8">
          <div class="item_Col_box">
            <Row>
              <Col class="item_Col" span="12">
              <p>{{$t('m.shěnpītōngguòshù')}} ({{$t('m.gè')}})</p> <span>{{shenTongDataTotal.passCount}}</span></Col>
              <Col class="item_Col" span="12">
              <p>{{$t('m.shěnpītōngguòlǜ')}}</p>
              <i-circle :size="100" :percent="shenTongDataTotal.passRate" :stroke-width="13" :trail-width="13" stroke-color="#2D8CF0" trail-color="#FFF">
                <span class="item_Col_box_circle_title_two">{{shenTongDataTotal.passRate}}%</span>
              </i-circle>
              </Col>
            </Row>
          </div>
          </Col>
        </Row>

        <Row class="shenTong_tab_item">
          <Col class="item_Col" span="6">
          <div class="item_Col_box">
            <p>{{$t('m.shěnpīfàngkuǎnshù')}} ({{$t('m.gè')}})</p> <span>{{shenTongDataTotal.paidCount}}</span>
          </div>
          </Col>
          <Col class="item_Col" span="6">
          <div class="item_Col_box">
            <p>{{$t('m.shěnpīfàngkuǎnjīné')}} </p> <span class="Amount">₫ {{ shenTongDataTotal.payAmount}}</span>
          </div>
          </Col>
          <Col class="item_Col" span="6">
          <div class="item_Col_box">
            <p>{{$t('m.dāngqiánhuíkuǎnjīné')}} </p> <span class="Amount">₫ {{shenTongDataTotal.repaidAmount}}</span>
          </div>
          </Col>
          <Col class="item_Col" span="6">
          <div class="item_Col_box">
            <p>{{$t('m.běnjīnhuíshōulǜ')}}</p>
            <i-circle :size="100" :percent="shenTongDataTotal.repaidRate" :stroke-width="13" :trail-width="13" stroke-color="#2D8CF0" trail-color="#FFF">
              <span class="item_Col_box_circle_title_two">{{shenTongDataTotal.repaidRate}}%</span>
            </i-circle>
          </div>
          </Col>
        </Row>
        <Row class="shenTong_tab_item">
          <Col class="item_Col" span="8">
          <div class="item_Col_box">
            <Row>
              <Col class="item_Col" span="12">
              <p>D0{{$t('m.yúqíshù')}}</p> <span>{{shenTongDataTotal.zeroDCount}}</span></Col>
              <Col class="item_Col" span="12">
              <p>{{$t('m.yúqílǜ')}}</p>
              <i-circle :size="100" :percent="shenTongDataTotal.zeroDRate" :stroke-width="13" :trail-width="13" stroke-color="#DF6E6E" trail-color="#FFF">
                <span class="item_Col_box_circle_title_two">{{shenTongDataTotal.zeroDRate}}%</span>
              </i-circle>
              </Col>
            </Row>
          </div>
          </Col>
          <Col class="item_Col" span="8">
          <div class="item_Col_box">
            <Row>
              <Col class="item_Col" span="12">
              <p>D7{{$t('m.yúqíshù')}}</p> <span>{{shenTongDataTotal.sevenDCount}}</span></Col>
              <Col class="item_Col" span="12">
              <p>{{$t('m.yúqílǜ')}}</p>
              <i-circle :size="100" :percent="shenTongDataTotal.sevenDRate" :stroke-width="13" :trail-width="13" stroke-color="#DF6E6E" trail-color="#FFF">
                <span class="item_Col_box_circle_title_two">{{shenTongDataTotal.sevenDRate}}%</span>
              </i-circle>
              </Col>
            </Row>
          </div>
          </Col>
          <Col class="item_Col" span="8">
          <div class="item_Col_box">
            <Row>
              <Col class="item_Col" span="12">
              <p>D7+{{$t('m.yúqíshù')}}</p> <span>{{shenTongDataTotal.sevenPlusDCount}}</span></Col>
              <Col class="item_Col" span="12">
              <p>{{$t('m.yúqílǜ')}}</p>
              <i-circle :size="100" :percent="shenTongDataTotal.sevenPlusDRate" :stroke-width="13" :trail-width="13" stroke-color="#DF6E6E" trail-color="#FFF">
                <span class="item_Col_box_circle_title_two">{{shenTongDataTotal.sevenPlusDRate}}%</span>
              </i-circle>
              </Col>
            </Row>
          </div>
          </Col>
        </Row>

        <Table border :columns="qualityTable" :data="shenTongQualityPaging" class="quality_box" :loading="shenTongQualityLoading"></Table>
        <div style="float:right;margin-right: -12px;margin-top: 20px;">
          <Page v-if="shenTongDataList.length >10" :total="shenTongDataList.length" :current.sync="QualityPage" :ProgressPage-size-opts="[10, 20, 40, 80, 100, 200, 400, 600, 800, 1000]" show-total show-elevator show-sizer @on-change="QualityChange" @on-page-size-change="QualitySizeChange"></Page>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import { formatTreeMount } from "@/libs/util";
export default {

  name: 'shenTong',
  data () {
    return {
      value1: '',
      auditType: 'first',
      assignedDateBegin: "",
      assignedDateEnd: "",
      checkerFirst: '',
      PersonnelList: [],
      shenTongDataTotal: {},
      shenTongDataList: [],
      TimeDefault: [],
      shenTongProgressLoading: true,
      shenTongQualityLoading:true,
      ProgressPageSize: 10,
      ProgressPage: 1,
      QualityPageSize: 10,
      QualityPage: 1,
      shenTongProgressPaging: [],
      shenTongQualityPaging:[],
      finalPersonnelList: [
        {
          account: "admin"
        }
      ],
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
      scheduleTable: [
        {
          title: this.$t('m.dayTime'),
          align: 'center',
          key: 'assignedDate',
          fixed: 'left',
        },
        {
          title: this.$t('m.shěnpīrényuán'),
          align: 'center',
          key: 'checkerFirst'
        },
        {
          title: this.$t('m.fēndānshù'),
          align: 'center',
          key: 'assignedCount'
        },
        {
          title: this.$t('m.dàishěnpīshù'),
          align: 'center',
          key: 'auditingCount'
        },
        {
          title: this.$t('m.yǐshěnpīshù'),
          align: 'center',
          key: 'auditedCount'
        },
        {
          title: this.$t('m.shěnpītōngguòshù'),
          align: 'center',
          key: 'passCount'
        },
        {
          title: this.$t('m.shěnpījùjuéshù'),
          align: 'center',
          key: 'rejectCount'
        },
        {
          title: this.$t('m.shěnpītōngguòlǜ'),
          align: 'center',
          key: 'passRate',
          render: (h, param) => {
            return h("div", param.row.passRate+'%');
          }
        },
        {
          title: this.$t('m.guàqǐshù'),
          align: 'center',
          key: 'hangingCount'
        }
      ],
      qualityTable: [
        {
          title: this.$t('m.dayTime'),
          width: 200,
          align: 'center',
          key: 'assignedDate',
          fixed: 'left',
        },
        {
          title: this.$t('m.shěnpīrényuán'),
          width: 200,
          align: 'center',
          key: 'checkerFirst'
        },
        {
          title: this.$t('m.fēndānshù'),
          width: 200,
          align: 'center',
          key: 'assignedCount'
        },
        {
          title: this.$t('m.dàishěnpīshù'),
          width: 200,
          align: 'center',
          key: 'auditingCount'
        },
        {
          title: this.$t('m.yǐshěnpīshù'),
          width: 200,
          align: 'center',
          key: 'auditedCount'
        },
        {
          title: this.$t('m.shěnpītōngguòshù'),
          width: 200,
          align: 'center',
          key: 'passCount'
        },
        {
          title: this.$t('m.shěnpīfàngkuǎnshù'),
          width: 200,
          align: 'center',
          key: 'paidCount'
        },
        {
          title: this.$t('m.shěnpīfàngkuǎnjīné'),
          width: 200,
          align: 'center',
          key: 'payAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.payAmount));
          }
        },
        {
          title: 'D0' + this.$t('m.yúqíshù'),
          width: 200,
          align: 'center',
          key: 'zeroDCount'
        },
        {
          title: 'D0' + this.$t('m.yúqílǜ'),
          width: 200,
          align: 'center',
          key: 'zeroDRate',
          render: (h, param) => {
            return h("div", param.row.zeroDRate+'%');
          }
        },
        {
          title: 'D7' + this.$t('m.yúqíshù'),
          width: 200,
          align: 'center',
          key: 'sevenDCount'
        },
        {
          title: 'D7' + this.$t('m.yúqílǜ'),
          width: 200,
          align: 'center',
          key: 'sevenDRate',
          render: (h, param) => {
            return h("div", param.row.sevenDRate+'%');
          }
        },
        {
          title: 'D7+' + this.$t('m.yúqíshù'),
          width: 200,
          align: 'center',
          key: 'sevenPlusDCount'
        },
        {
          title: 'D7+' + this.$t('m.yúqílǜ'),
          width: 200,
          align: 'center',
          key: 'sevenPlusDRate',
          render: (h, param) => {
            return h("div", param.row.sevenPlusDRate+'%');
          }
        },
        {
          title: this.$t('m.dāngqiánhuíkuǎnjīné'),
          width: 200,
          align: 'center',
          key: 'repaidAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.repaidAmount));
          }
        },
        {
          title: this.$t('m.běnjīnhuíshōulǜ'),
          width: 200,
          align: 'center',
          key: 'repaidRate'
        }
      ],
    }
  },
  components: {
  },
  props: {},
  watch: {


    auditType: function (v) {
      if (v == 'final') {
        this.queryPersonnel('checker_leader')
      } else {
        this.queryPersonnel('checker')
      }
    },
  },
  methods: {
    ProgressSizeChange (val) {
      this.shenTongProgressLoading = true
      this.ProgressPageSize = val
      this.ProgressPage = 1
      this.shenTongProgressPaging = this.shenTongDataList.slice(0, this.ProgressPageSize)
      setTimeout(() => {
        this.shenTongProgressLoading = false
      }, 500);
    },
    // 页码改变的回调，返回改变后的页码
    ProgressChange (val) {
      this.shenTongProgressLoading = true
      this.ProgressPage = val
      this.shenTongProgressPaging = []
      this.shenTongProgressPaging = this.shenTongDataList.slice((this.ProgressPage - 1) * this.ProgressPageSize, this.ProgressPage * this.ProgressPageSize)
      setTimeout(() => {

        this.shenTongProgressLoading = false
      }, 500);
    },
    QualitySizeChange(val) {
      this.shenTongQualityLoading = true
      this.QualityPageSize = val
      this.QualityPage = 1
      this.shenTongQualityPaging = this.shenTongDataList.slice(0, this.QualityPageSize)
      setTimeout(() => {
        this.shenTongQualityLoading = false
      }, 500);
    },
    QualityChange (val) {
      this.shenTongQualityLoading = true
      this.QualityPage = val
      this.shenTongQualityPaging = []
      this.shenTongQualityPaging = this.shenTongDataList.slice((this.QualityPage - 1) * this.QualityPageSize, this.QualityPage * this.QualityPageSize)
      setTimeout(() => {

        this.shenTongQualityLoading = false
      }, 500);
    },

    queryDateEvent () {
      var d = new Date();
      let y = d.getFullYear(); // 年份
      let m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
      let r = d.getDate().toString().padStart(2, '0'); // 日子
      let h = d.getHours().toString().padStart(2, '0'); // 小时 
      let mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
      let ss = d.getSeconds().toString().padStart(2, '0'); // 秒
      this.assignedDateBegin = `${y}-${m}-${r}`; // es6 字符串模板
      this.assignedDateEnd = `${y}-${m}-${r}`;
      this.TimeDefault = [`${y}-${m}-${r}`, `${y}-${m}-${r}`]
      // this.repayForm.repayDate = this.hksjsaleDate
    },

    emptyQueryInfo () {

      this.queryDateEvent()
      this.auditType = 'first',
        // this.assignedDateBegin = "",
        // this.assignedDateEnd = "",
        this.checkerFirst = ''
      this.queryShenTong()
    },
    timeChange (e) {
      if (typeof (e) == "undefined") {
        this.assignedDateBegin = e[0];
      } else if (typeof (e) == "object") {
        this.assignedDateBegin = e[0];
        this.assignedDateEnd = e[1];
        // this.getUserListByCondition();
      }
    },
    queryPersonnel (v) {
      this.$http.get('/api/laocai/sys/account/list?enable=1&roleName=' + v).then((res) => {
        if (res.body.code == 0) {
          this.PersonnelList = res.body.result.list
        } else {
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }
      })
    },
    queryShenTong () {

      let param = {},
        query = '';
      param.assignedDateBegin = this.assignedDateBegin
      param.assignedDateEnd = this.assignedDateEnd
      param.auditType = this.auditType
      param.checkerFirst = this.checkerFirst
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/check/staticAudit/first?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.shenTongDataTotal = res.body.result.total
          this.shenTongDataList = res.body.result.list
          this.shenTongProgressPaging = this.shenTongDataList.slice(0, this.ProgressPage * this.ProgressPageSize)
          this.shenTongQualityPaging =this.shenTongDataList.slice(0, this.QualityPage * this.ProgressPageSize)
          this.shenTongDataTotal.payAmount = formatTreeMount(this.shenTongDataTotal.payAmount)
          this.shenTongDataTotal.repaidAmount = formatTreeMount(this.shenTongDataTotal.repaidAmount)
        } else {
          this.shenTongDataTotal = {}
          this.shenTongDataList = []
        }

        this.shenTongProgressLoading = false
        this.shenTongQualityLoading = false
        this.$Message.success(this.$t('m.errorCode' + res.body.code));

      });

    },

  },
  filters: {},
  computed: {},
  created () { },
  mounted () {
    this.queryDateEvent()
    this.queryPersonnel('checker')
    this.queryShenTong()
  },
  destroyed () { }

}
</script>

<style  lang="scss">
@import "../static/style.css";
@import "../static/common.scss";
.shenTong_box {
  padding: 15px;
  .parameter_box {
    width: 200px;
    margin-right: 50px;
    margin-left: 5px;
  }
  .shenTong_tab {
    // background: red;
    .ivu-tabs-content {
      margin: 0px -12px;
    }
    margin-top: 30px;
    .shenTong_tab_item {
      // background: red;
      .item_Col {
        // background: #fff;
        text-align: center;
        .item_Col_box {
          height: 160px;
          margin: 12px;
          padding: 19px 30px;

          background: #f0f2f5;
          p {
            text-align: left;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
          }
          span {
            font-size: 45px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: rgba(34, 34, 34, 1);
          }
          .Amount {
            margin-top: 30px;
            font-size: 30px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: rgba(34, 34, 34, 1);
          }
          .item_Col_box_color_White {
            color: rgba(255, 255, 255, 1);
          }
          .item_Col_box_circle_title {
            font-size: 18px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: rgba(255, 255, 255, 1);
          }

          .item_Col_box_circle_title_two {
            font-size: 18px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: #222222;
          }
        }
        .ApprovalBy {
          background: linear-gradient(
            90deg,
            rgba(45, 140, 240, 1) 0%,
            rgba(18, 91, 212, 1) 100%
          );
          border-radius: 5px;
        }
        .ApprovalRefuse {
          background: linear-gradient(
            90deg,
            rgba(225, 112, 112, 1) 0%,
            rgba(197, 73, 73, 1) 100%
          );
          border-radius: 5px;
        }
        .ApprovalPending {
          background: linear-gradient(
            90deg,
            rgba(232, 185, 33, 1) 0%,
            rgba(230, 124, 29, 1) 100%
          );
          border-radius: 5px;
        }
      }
    }
    .quality_box {
      margin: 0 12px;
      margin-top: 30px;
    }
    .schedule_box {
      margin: 0 12px;
      margin-top: 30px;
    }
  }
}
.items {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 20px;
  width: 200px;

  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
</style>